<template>
  <el-row >
      <el-col :span="12" style="height:30px;margin-top:20px;">

    　</el-col>
      <el-col :span="12" style="height:30px;">
         <el-input placeholder="请输入搜索内容" icon="search"

          v-model="searchInputValue"  @keyup.enter.native ="queryObjects()" >

        </el-input>

      </el-col>
      <el-col :span="24" >
            <el-table
                :data="dataList"
                border
                style="width: 100%"

                @row-click="rowClick"
                >
                <el-table-column
                  prop="databasename"
                  label="数据库"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="objectscema"
                  label="模式"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="objecttype"
                  label="类型">
                </el-table-column>
                 <el-table-column
                                  prop="objectname"
                                  label="对象名">
                                </el-table-column>
              </el-table>
      </el-col>

      <el-col :span="24" style="height:30px;margin-top:20px;">
      <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"

            :page-sizes="[10, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
          </el-pagination>
      </el-col>
    </el-row>
</template>

<script>
    import Vue from 'vue';
    import {dbobjectsApi} from '../apis/dbobjects.js';

    import 'element-ui/lib/theme-default/table.css';
    import 'element-ui/lib/theme-default/pagination.css'
    import {Table,TableColumn,Pagination } from 'element-ui'
    Vue.component(Table.name, Table)
    Vue.component(TableColumn.name, TableColumn)
    Vue.component(Pagination.name, Pagination)
    export default {
        data () {
            return {
                searchInputValue :null,
                dataList:[],
                currentPage:1,
                pageSize:10,
                totalCount:0
            }
        },
		watch: {
            '$route' (to, from) {
                // 对路由变化作出响应...
                this.searchInputValue =to.query.queryString;
				this.goto(0,this.pageSize,to.query.queryString);

            },
            '$vnode' (to, from) {
                
            }
        },
        mounted() {

             this.searchInputValue =this.$route.query.queryString;

             this.goto(0,this.pageSize,this.searchInputValue);
        },
        methods:{
             goto(page ,pageSize ,queryString){
                   var me=this ;
                   dbobjectsApi.queryObjects(page ,pageSize ,queryString).then(
                       ret =>{

                              me.totalCount =ret.totalElements;

                              me.dataList =ret.content;
                       }
                   );

             },
             queryObjects(){
                                  if(this.searchInputValue!=null && this.searchInputValue!=''){
                                             this.$router.push({
                                               name:"queryview",
                                               path:"/query" ,
                                               query:{queryString:this.searchInputValue}
                                             });
                                  }
             },
             handleSizeChange(size){
                  this.currentPage=1;
                  this.goto(0,size,this.searchInputValue);
             },
             handleCurrentChange(page){
                  this.goto(page-1,this.pageSize,this.searchInputValue);
             },
             rowClick(row, event, column){
                  this.$router.push({
                     path :"/view/"+row.databaseid+"/"+row.objectscema+"/"+row.objecttype+"/"+row.objectname,
                     query: {queryString:this.searchInputValue}
                  })
             }
        }
    }
</script>

<style>

</style>